<template>
    <div>
        <!--查询面板-->
        <el-card class="box-card">
            <el-input v-model="queryData.rolesName" placeholder="名称" size="small"></el-input>

            <el-button type="primary" size="small" @click="queryDataHandle(1, 10)">查询</el-button>
<!--            <el-divider direction="vertical"></el-divider>-->
            <el-button plain size="small" @click="resetQuery">重置</el-button>
        </el-card>

        <div class="interspaceH"></div>

        <!--列表面板-->
        <el-card class="box-card">
<!--            <el-button type="primary" size="small" @click="formHandle('add')">+ 添加</el-button>
            <div class="interspaceH"></div>-->
            <el-table :data="dataSource"
                      :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                <el-table-column prop="rolesName" label="名称" :formatter="formatter"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="setRolesHandle(scope.row)" type="text" size="small">设置权限</el-button>
<!--                        <el-divider direction="vertical"></el-divider>
                        <el-button @click="formHandle('edit', scope.row)" type="text" size="small">修改</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button @click="deleteHandle(scope.row)" type="text" size="small">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <div class="interspaceH"></div>

            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="dataSource.length">
            </el-pagination>
        </el-card>

        <!--添加/修改面板-->
        <el-dialog :title="formType == 'add' ? '新增角色' : '修改角色'" :visible.sync="formVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="formPanel" :model="formData" label-position="left" label-width="80px">
                <el-form-item label="名称" prop="rolesName" :rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
                    <el-input v-model="formData.rolesName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitData()" type="primary" size="small">确定</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="formVisible = false" size="small">取消</el-button>
            </span>
        </el-dialog>

        <!--添加/修改面板-->
        <el-dialog title="设置权限" :visible.sync="authorityVisible" width="30%" :close-on-click-modal="false">
            <el-button @click="$refs.authorityTree.setCheckedKeys(checkAuthorityAll)" type="primary" size="small">全选</el-button>
            <el-button @click="$refs.authorityTree.setCheckedKeys([])" size="small">清空</el-button>

            <div class="interspaceH"></div>

            <el-tree :data="authorityList" show-checkbox default-expand-all node-key="permissionId" ref="authorityTree" highlight-current :props="treeProps"></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="allotAuthorityForRole" type="primary" size="small">确定</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="authorityVisible = false;$refs.authorityTree.setCheckedKeys([])" size="small">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//查询表单
const initQueryData = {
    rolesName: '',//名称
}
//添加/修改表单
const initFormData = {
    rolesId: '',
    rolesName: '',//名称
}
//下拉列表开始

//下拉列表结束

export default {
    data() {
        return {
            //添加/修改
            formType: '',
            //添加/修改是否显示
            formVisible: false,
            //设置权限
            authorityVisible: false,
            //下拉列表种类
            dictionary: {},
            //字段转换
            fieldType: {},
            //查询表单
            queryData: {...initQueryData},
            //添加/修改表单
            formData: {...initFormData},
            //权限列表
            authorityList: [],
            //权限全选id
            checkAuthorityAll: [],
            //权限tree配置
            treeProps: {
                children: 'children',
                label: 'permissionName'
            },
            //列表数据
            dataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        //初始化执行查询方法
        this.queryDataHandle(1, 10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let that = this
            let queryData = that.queryData

            let payload = {
                ...queryData,
                pageNum: page,
                pageSize: row,
                moduleType: "3"
            }

            that.$request("/api/roles/getRolesByParams/1_0", payload, "POST").then((data) => {
                that.dataSource = data.rows
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
            })
        },
        //重置方法
        resetQuery() {
            this.queryData = {...initQueryData}
        },
        //转换方法
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        //打开添加/删除弹窗方法
        formHandle(type, row) {
            if (type == 'add') {
                this.formType = 'add'
                this.formData = {...initFormData}
            } else if (type == 'edit') {
                this.formType = 'edit'
                this.formData = {...row}
            }

            this.formVisible = true
        },
        //删除方法
        deleteHandle(row) {
            let that = this
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request("/api/roles/deleteRoles/1_0?id=" + row.rolesId + "&type=3", "", "GET").then((data) => {
                    that.queryDataHandle()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            })
        },
        //提交/修改方法
        submitData() {
            let that = this
            let dataSource = that.dataSource
            that.$refs['formPanel'].validate((valid) => {
                if (!valid) {
                    return false
                }

                let payload = {
                    ...that.formData,
                    moduleType: "3"
                }
                let url = "";
                if (that.formType == 'add') {
                    url = "/api/roles/createRoles/1_0"
                } else if (that.formType == 'edit') {
                    url = "/api/roles/updateRoles/1_0"
                }
                this.$request(url, payload, "POST").then((data) => {
                    that.$message.success(that.formType == 'add' ? "添加成功！" : "修改成功")
                    that.formVisible = false
                    that.queryDataHandle()
                })
            });
        },
        allotAuthorityForRole() {
            let that = this
            let authorityList = this.$refs.authorityTree.getHalfCheckedKeys().concat(this.$refs.authorityTree.getCheckedKeys())

            let payload = {
                authorityList,
                rolesId: that.formData.rolesId
            }

            that.$request("/api/roles/allotAuthorityForRole/1_0", payload, "POST").then((data) => {
                that.$message.success('设置成功');
                that.queryDataHandle()
                that.$refs.authorityTree.setCheckedKeys([])
                that.formData = {...initFormData}
                that.authorityVisible = false;
            })
        },
        setRolesHandle(row) {
            let that = this
            that.formData = {...row}
            let payload = {
                moduleType: "3"
            }
            that.$request("/api/authority/getAuthorityByParams/1_0", payload, "POST").then((data) => {
                let checkAuthorityAll = []
                data.rows.map((item) => {
                    checkAuthorityAll.push(item.permissionId)
                })
                that.checkAuthorityAll = checkAuthorityAll

                that.authorityList = data.rows
                that.authorityVisible = true

                let checkAuthority = []

                row.permissionList.map((permission) => {
                    checkAuthority.push(permission.permissionId)
                })

                that.$nextTick(() => {
                    that.$refs.authorityTree.setCheckedKeys(checkAuthority);
                })
            })
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-card__body .el-select {
    width: 200px;
}

.el-form-item .el-select {
    width: 100%;
}

.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>



